<template>
		<el-upload class="avatar-uploader" list-type="picture-card" :show-file-list="false" action :http-request="uploadImage">
			<el-image v-if="imageUrl" :src="imageUrl" class="avatar" fit="cover"></el-image>
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
</template>
<script>
	export default {
		name: "uploadAvatar",
		emits: ['success'],
		props: {
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imageUrl: ''
			};
		},
		mounted() {
			this.imageUrl = this.$util.showFile(this.url)
		},
		methods: {
			uploadImage(e) {
				if (e.file) {
					let params = {
						file: e.file
					};
					this.$api.fileUpload('/common/uploadFile', params).then(res => {
						this.imageUrl = this.$util.showFile(res.data)
						this.$emit('success', res.data)
					})
				}
			}
		}
	};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
</style>